<template>
  <div>
    <set-header :text="text" :title="title" :chooseColor="chooseColor" :last-color="lastColor"></set-header>
    <!--主体部分-->
    <div class="body">
      <div class="body-box">
        <!--image部分-->
        <div class="image body-box-message">
          <div class="title floatLeft">Project image</div>
          <div class="enterInfo floatLeft imageInfo">
            <span class="block"><a heref="javascript:(viod)">Choose an image from your computer</a></span>
            <span class="block">This is the main image associated with your project.Make it count!
                  <br/>JPEG,PNG,GIF, or BMP.50MB file limit
                  <br/>At least 1024x576 pixels.16:9 aspect ratio
            </span>
          </div>
          <div class="clear"></div>
        </div>
        <!--title部分-->
        <div class="proTitle body-box-message">
          <div class="title floatLeft">Project title</div>
          <div class="enterInfo floatLeft proTitleInfo">
            <input type="text"/>
            <span class="block">Our search looks through words from your project title and blurb, so make them clear  and descriptive of what you’re making. Your profile name will be searchable, too.</span>
            <span class="block">These words will help people find your project, so choose them wisely!Your name will be searchable too.</span>
          </div>
          <div class="clear"></div>
        </div>
        <!--Short blurby部分-->
        <div class="shortBlurb body-box-message">
          <div class="title floatLeft">Short blurb</div>
          <div class="enterInfo floatLeft shortBlurbInfo">
            <input type="text"/>
            <span class="block">Give people a sense of what you’re doing. Skip ”Help me” and focus on what you’re making.</span>
          </div>
          <div class="clear"></div>
        </div>
        <!--Category部分-->
        <div class="Category body-box-message">
          <div class="title floatLeft">Category</div>
          <div class="enterInfo floatLeft locationInfo">
            <input type="text" class="block"/>
            <el-button>
              Subcategory(optional)
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
          </div>
          <div class="clear"></div>
        </div>
        <!--location部分-->
        <div class="location body-box-message">
          <div class="title floatLeft">Location</div>
          <div class="enterInfo floatLeft locationInfo">
            <input type="text" class="block"/>
          </div>
          <div class="clear"></div>
        </div>
        <!--duration1部分-->
        <div class="durationOne body-box-message">
          <div class="title floatLeft">Funding duration</div>
          <div class="enterInfo floatLeft durationOneInfo">
            <span class="days lineBlock">Number of days</span>
            <span class="lineBlock datInput">
              <input type="text" value="30"/>
              <span class="block">Up to 60 days, but we recommend 30 or fewer</span>
            </span>
            <span class="dateTime block">
              <input type="checkbox" id="date"/><label for="date">End on date & time</label>
            </span>
            <span class="block">Projects with shorter durations have higher success rates. You won’t be able to adjust your duration after you launch.</span>
          </div>
          <div class="clear"></div>
        </div>
        <!--duration2部分-->
        <div class="durationTwo body-box-message">
          <div class="title floatLeft">Funding duration</div>
          <div class="enterInfo floatLeft durationTwoInfo">
            <input type="text" class="block" placeholder="AU$ 0"/>
            <span class="block">Funding on Kickstarter is all-or-nothing. It’s okay to raise more than your goal, but if your goal isn’t met,no money will be collected. Your goal should reflect the minimum amount of funds you need to complete your project and send out rewards, and incued a buffer for payments processing fees.</span>
            <span class="block">If your project is successfully funded, the following fees will be collected from your funding total:Kickstarter’s 5% fee, and payment processing fees(between 3% and 5%).If funding isn’t successful, there are no fees.</span>
            <span class="block"><a href="javascript:(viod)">View fees breakdown</a></span>
          </div>
          <div class="clear"></div>
        </div>
        <!--collaborators部分-->
        <div class="collaborators body-box-message">
          <div class="title floatLeft">Project collaborators</div>
          <div class="enterInfo floatLeft collaboratorsInfo">
            <span class="block">Grant your teammates access to help with your project.</span>
            <button>Add collaborators</button>
          </div>
          <div class="clear"></div>
        </div>
        <!--左下角部分-->
        <div class="body-box-bottom">
          <div class="how">
            <span class="floatLeft block how-left"></span>
            <span class="floatLeft block how-right">
              <span class="block">How to：</span>
              <span class="block"><a href="javascript:(viod)">Make an awesome project</a></span>
            </span>
          </div>
          <div class="need">
            <span class="block">Need advice?</span>
            <span class="block">Visit Campus to read discussions about <a href="javascript:(viod)">preparing for a project </a>and more.</span>
          </div>
          <div class="fundedPledged">
            <div class="fundedPledged-top">
              <span class="lineBlock"></span>
              <span class="lineBlock"></span>
              <span class="lineBlock"></span>
              <span class="lineBlock"></span>
              <span class="lineBlock"></span>
              <span class="lineBlock"></span>
            </div>
            <ul>
              <li v-for="item in names">{{item}}</li>
            </ul>
            <span class="line block"></span>
            <div class="last-text">
              <span class="lineBlock">0%</span>
              <span class="lineBlock">AU$ 0.00</span>
              <span class="block">funded  pledged</span>
            </div>
          </div>
        </div>

      </div>
      </div>
    <set-footer></set-footer>
  </div>

</template>

<script>
  import SetHeader from '../public/SetHeader'
  import SetFooter from '../public/SetFooter'

    export default {
        name: "set-your-basics",
        components:{ SetHeader, SetFooter },
        data(){
          return{
            names:[ 'Untitled', 'Sun He', 'ggg'],
            text:'Make a great first impression with your project’s title and image, and set your funding goal, campaign duration, and project category.',
            title:'Let’s get started.',
            chooseColor:[ true, false, false, false, false ],
              lastColor:[ '', '', '', '', '' ]
          }
        }
    }
</script>

<style scoped lang="scss">
  .clear{clear: both}
  .floatLeft{float: left}
  .block{display: block}
  .lineBlock{display: inline-block}
  a{text-decoration: none}
  input{outline: none}
.body{
  width: 100vw;
  background-color:#DBDEDD;
  .body-box{
    width: 930px;
    background-color: #ffffff;
    margin: 0 auto;
    padding:22px 0 32px 24px;
    box-sizing: border-box;
    .body-box-message{
      background: #F8F9FD;
      width: 641px;
      padding-top: 4px;
    }
    .title{
      padding:12px 0 0 14px;
      width: 172px;
      font-family: Arial-BoldMT;
      font-size: 12px;
      color: #2E2E2E;
      letter-spacing: 0.4px;
    }
    .enterInfo{width: 450px;}
    .image{
      margin-bottom: 26px;
      .imageInfo{
        height: 113px;
        background: #FFFFFF;
        border: 1px dashed #596EE1;
        border-radius: 6px;
        text-align: center;
        margin:0px 0px 56px 0;
        padding-top: 21px;
        box-sizing: border-box;
        span{
          font-family: ArialMT;
          font-size: 12px;
          color: #2E2E2E;
          letter-spacing: 0.4px;
          line-height: 18px;
          a{
            font-family: Arial-BoldMT;
            font-size: 14px;
            color: #2C59F6;
            letter-spacing: -0.8px;
          }
        }
      }
    }
    .proTitle{
      margin-bottom:22px;
      input{
        width: 450px;
        height: 39px;
        background: #FFFFFF;
        border: 1px solid #DBDEDD;
        margin:0px 0 9px 0;
      }
      span{
        font-family: ArialMT;
        font-size: 12px;
        color: #2E2E2E;
        letter-spacing: 0.2px;
        line-height: 16px;
      }
        span:nth-child(3){
          margin: 10px 0 15px 0;
        }
    }
    .shortBlurb{
      margin-bottom:21px;
      input{
        width: 450px;
        height: 70px;
      }
      span{
        font-family: ArialMT;
        font-size: 12px;
        color: #2E2E2E;
        letter-spacing: 0.2px;
        line-height: 16px;
        margin: 8px 0 16px 0;
      }
    }
    .Category{
      margin-bottom: 26px;
      input{
        width: 450px;
        height: 40px;
      }
      .el-button{
        width: 454px;
        height: 41px;
        text-align: left;
        padding-left: 8px;
        font-family: ArialMT;
        margin-top: 4px;
        font-size: 14px;
        color: #2E2E2E;
        letter-spacing: 0.6px;
        .el-icon-arrow-down{
          float: right;
        }
      }
    }
    .location{
      height: 48px;
      margin-bottom: 22px;
      input{
        margin: 3px 5px 4px 0;
        height: 41px;
        width: 450px;
      }
    }
    .durationOne{
      padding-bottom: 16px;
      .days{
        width: 144px;
        height:101px;
        background: #FFFFFF;
        border: 1px solid #DBDEDD;
        display: inline-block;
        vertical-align: middle;
        padding: 13px 0 0 32px;
      }
      .datInput{
        width: 254px;
        height: 99px;
        vertical-align: middle;
        background-color: #ffffff;
        border: 1px solid #DBDEDD;
        border-left: none;
        padding:15px 0 0 16px;
        input{
          width:229px;
          height:40px;
          padding-left: 11px;
          margin-bottom:6px;
        }
      }
      .dateTime{
        width: 449px;
        line-height: 40px;
        background: #FFFFFF;
        border: 1px solid #DBDEDD;
        border-radius: 4px;
        font-family: ArialMT;
        font-size: 12px;
        color: #2E2E2E;
        letter-spacing: 0.6px;
        margin:3px 0 8px 0;
        input{
          margin: 0 7px 0 10px;
          border-radius: 50%;
        }
      }

    }
    .durationTwo{
      margin:22px 0;
      input{
        width: 439px;
        height: 40px;
        padding-left: 10px;
        font-family: ArialMT;
        font-size: 14px;
        color: #2E2E2E;
        margin-bottom: 8px;
      }
      span{
        font-family: ArialMT;
        font-size: 12px;
        color: #2E2E2E;
        letter-spacing: 0.2px;
        line-height: 16px;
        margin-bottom: 11px;
        a{
          margin-bottom:17px;
          font-family: ArialMT;
          font-size: 12px;
          color: #2C59F6;
          letter-spacing: 0.2px;
          text-decoration: none;
        }
      }
    }
    .collaborators{
      margin-bottom: 370px;
      .collaboratorsInfo{
        span{margin: 10px 0 11px 0;}
        button{
          background: #2C59F6;
          outline: none;
          font-family: Arial-BoldMT;
          font-size: 14px;
          color: #FFFFFF;
          letter-spacing: -0.4px;
          margin-bottom:19px;
          width: 158px;
          height: 38px;
        }
      }
    }
    .body-box-bottom{
      .how{
        width: 220px;
        height: 50px;
        background: #F0F0F0;
        border-radius: 3px;
        margin-bottom: 30px;
        .how-left{
          background: #D8D8D8;
          border: 1px solid #979797;
          width: 25px;
          height: 34px;
          margin: 7px 8px 0 9px;
        }
        .how-right{
          margin-top: 7px;
          font-family: ArialMT;
          font-size: 12px;
          color: #2E2E2E;
          letter-spacing: 0;
          a{
            font-family: Arial-BoldMT;
            font-size: 14px;
            color: #2C59F6;
            letter-spacing: -0.7px;
            margin-top: 1px;
          }
        }
      }
      .need{
        span{
          font-family: ArialMT;
          font-size: 12px;
          color: #2E2E2E;
          letter-spacing: 0.2px;
          line-height: 17px;
          width: 220px;
        }
        span:nth-child(1){
          font-family: Arial-BoldMT;
          font-size: 12px;
          color: #2E2E2E;
          margin-bottom: 11px;
        }
      }
      .fundedPledged{
        margin-top: 33px;
        width: 220px;
        height: 390px;
        background: #FFFFFF;
        border: 1px solid #DBDEDD;
        border-radius: 2px;
        .fundedPledged-top{
          margin-bottom: 11px;
          span{
            width:73px;
            height: 92px;
            background: #DDDFDE;

          }
          span:nth-child(4),span:nth-child(5),span:nth-child(6){
            height: 30px;
            margin-top: -4px;
          }
          span:nth-child(2){background: #E8E8E8;}
          span:nth-child(3){background: #EFEFEF;}
          span:nth-child(4){background: #D0D2D2;}
          span:nth-child(5){background: #DBDBDB;}
          span:nth-child(6){background: #E2E2E2;}
        }
        ul{
          margin-bottom: 136px;
          li{
            font-family: ArialMT;
            font-size: 12px;
            color: #2E2E2E;
            letter-spacing: 0.4px;
            padding-left:11px;
            box-sizing: border-box;
            list-style: none;
            margin-bottom: 4px;
          }
          li:nth-child(2){
            margin-bottom: 11px;
          }
        }
        .line{
          width: 198px;
          height: 6px;
          background: #DBDEDD;
          border-radius: 5px;
          margin: 0 auto;
        }
        .last-text{
          font-family: Arial-BoldMT;
          font-size: 12px;
          color: #000000;
          padding: 10px 0 0 11px;
          box-sizing: border-box;
          span:nth-child(1){
            margin:0 30px 5px 0;
          }
          span:last-child{
            font-family: ArialMT;
            font-size: 12px;
            color: #3D3E63;
            letter-spacing: 0.4px;
          }
        }
      }

    }
  }
}

</style>
